
<template>
    <div class="app-container">
        <el-select v-model="markdownForm.type" class="EditorText" size="small" style="width:60px" :class="stateNumArray[markdownForm.type]" placeholder="请选择">
            <el-option v-for="item in stateArray" :class="stateNumArray[item.value]" :key="item.value" :value="item.value" :label="item.label"></el-option>
        </el-select>
        <el-input v-model="markdownForm.title" placeholder="请输入标题" size="small" style="width:500px"></el-input>
        <el-button size="small" @click="save()">保存</el-button>
        <br><br>
        <mavon-editor ref="md" @save="save" @imgDel="imgDel" v-model="markdownForm.contentMarkdown" :codeStyle="markdown.codeStyle" :toolbars="markdown.toolbars">
            <span slot="left-toolbar-after" class="op-icon-divider"></span>
            <div slot="left-toolbar-after" type="button" aria-hidden="true" title="导入" class="op-icon dropdown dropdown-wrapper el-icon-s-cooperation">
                <div class="op-header popup-dropdown transition">
                    <div title="#" class="dropdown-item" @click="chooseAPIEvent"><span>导入API接口</span></div>
                    <div title="##" class="dropdown-item" @click="chooseModelEvent"><span>导入数据模型</span></div>
                </div>
            </div>
        </mavon-editor>
        <el-drawer class="CustomDrawer DocEditor" title="导入接口文档模板" :wrapperClosable="false" show-close append-to-body :size="docEditWidth" :visible.sync="chooseAPIStatus">
            <chooseAPI v-if="chooseAPIStatus" ref="chooseAPI" :hideEvent="hideChooseApiEvent" :setMarkdownForm="setMarkdownForm"></chooseAPI>
        </el-drawer>
        <el-dialog title="选择文件夹" append-to-body :visible.sync="showSaveFolder" width="600px">
            <div class="tree" v-if="showSaveFolder && folderList">
                <folder @chooseFolder="chooseFolder" :folderValue="folderList" :selectFolderEvent="selectFolder" :activeFolderId="activeFolderId"></folder>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showSaveFolder = false" size="small">取 消</el-button>
                <el-button type="primary" @click="chooseFolder" size="small">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
 
<script>
// import { getMarkdownArticle, saveMarkdownArticle } from 'markdownArticle'
// import { uploadImg } from 'markdownArticleImg'

import chooseAPI from './chooseAPI'
import chooseModel from './chooseModel'
import folder from './folder';

export default {
    props: ['closeEditor'],
    components: {
        chooseModel,
        chooseAPI,
        folder
    },
    data() {
        return {
            markdown: {
                codeStyle: 'atom-one-dark',
                toolbars: {
                    bold: true, // 粗体
                    italic: true, // 斜体
                    header: true, // 标题
                    underline: true, // 下划线
                    strikethrough: true, // 中划线
                    mark: true, // 标记
                    superscript: true, // 上角标
                    subscript: true, // 下角标
                    quote: true, // 引用
                    ol: true, // 有序列表
                    ul: true, // 无序列表
                    link: true, // 链接
                    imagelink: false, // 图片链接
                    code: true, // code
                    table: true, // 表格
                    fullscreen: false, // 全屏编辑
                    readmodel: false, // 沉浸式阅读
                    htmlcode: true, // 展示html源码
                    help: false, // 帮助
                    /* 1.3.5 */
                    undo: true, // 上一步
                    redo: true, // 下一步
                    trash: true, // 清空
                    save: false, // 保存（触发events中的save事件）
                    /* 1.4.2 */
                    navigation: true, // 导航目录
                    /* 2.1.8 */
                    alignleft: true, // 左对齐
                    aligncenter: true, // 居中
                    alignright: true, // 右对齐
                    /* 2.2.1 */
                    subfield: true, // 单双栏模式
                    preview: false, // 预览
                }
            },
            stateNumArray: {
                'orange': 'text_orange',
                'blue': 'text_blue',
                'red': 'text_red',
                'green': 'text_green',
                'gray': 'text_gray',
                undefined: 'text_transparent',
                null: 'text_transparent',
            },
            stateArray: [
                { value: 'orange', label: ' ', },
                { value: 'blue', label: ' ', },
                { value: 'red', label: ' ', },
                { value: 'green', label: ' ', },
                { value: 'gray', label: ' ', },
            ],
            showSaveFolder: false,
            markdownForm: {
                title: "新建文档",
                contentMarkdown: '',
                contentHtml: null,
                type: 'orange'
            },
            chooseAPIStatus: false,
            // chooseModelStatus: false,
            showDropdown: false,
            lastSaveTime: null,
            timer: null,
            docEditWidth: '500px',
            docObjectId: null,
            folderList: {},
            activeFolderId: null,
        }
    },
    mounted() {
        this.markdownForm = {
            title: "新建文档",
            contentMarkdown: '',
            contentHtml: null,
            type: 'orange'
        };
        this.docEditWidth = document.body.clientWidth - 140 + 'px'
    },
    methods: {
        selectFolder(folder) {
            this.activeFolderId = folder.folderId;
        },
        chooseModelEvent() {
            this.$store.dispatch('customKey/showCustomDrawer', {
                type: 'modal',
                callbackEvent: (str) => {
                    this.$refs.md.$insertText(str);
                },
            });
        },
        hideChooseApiEvent() {
            this.chooseAPIStatus = false
        },
        setMarkdownForm(value) {
            this.$refs.md.$insertText(value);
            this.chooseAPIStatus = false;
        },
        chooseAPIEvent() {
            this.chooseAPIStatus = true
            this.$nextTick(() => {
                this.$refs.chooseAPI.setTree(this.$store.state.Tree.tree);
            });
        },
        getArticle(id) {  //获取文章内容
            window.action.doc.doc.detail(id).then((res) => {
                if (res) {

                };
            });
        },
        chooseFolder() {
            var activeId = this.activeFolderId
            window.action.doc.doc.creat({
                title: this.markdownForm.title,
                content: this.markdownForm.contentMarkdown,
                status: this.markdownForm.type,
                folderId: activeId,
            }).then((res) => {
                if (res) {
                    this.$store.dispatch('doc_tree/addDoc', {
                        id: res,
                        docId: res,
                        title: this.markdownForm.title,
                        status: this.markdownForm.type,
                        folderId: activeId,
                    });
                    this.$nextTick(() => {
                        this.$store.dispatch('doc_tree/setActiveId', res);
                        this.closeEditor();
                    });
                };
            });
            this.showSaveFolder = false;
            this.activeFolderId = null;
            this.folderList = [];
        },
        save() {  //保存文章内容
            if (this.showSaveFolder) {
                return;
            };
            var confirm = this.$confirm('是否更新服务器数据？');
            if (confirm) {
                if (!this.docObjectId) {
                    this.$store.dispatch('doc_tree/getTreeData', folderList => {
                        this.activeFolderId = null;
                        this.folderList = folderList;
                        this.showSaveFolder = true;
                    });
                } else {
                    window.action.doc.doc.updata({
                        docId: this.docObjectId,
                        title: this.markdownForm.title,
                        content: this.markdownForm.contentMarkdown,
                        status: this.markdownForm.type,
                    }).then((res) => {
                        if (res) {
                            console.log(res)
                        };
                    });
                };
            }
        },
        imgDel(pos, url) { //删除图片，并不是修改就会触发，仅支持工具栏操作
            console.log(pos)
            console.log(url)
        }
    }
}
</script>
 
<style scoped>

.el-icon-s-cooperation .popup-dropdown{
    display: none !important;
    margin: -5px 0 0 0;
    min-width: 120px !important;
}



.el-icon-s-cooperation:hover .popup-dropdown{
    display: block !important;
}




.app-container {
    position: absolute;
    bottom: 0;
    top: 0px;
    left: 0;
    right: 0;
    padding: 20px;
}

.v-note-wrapper {
    position: absolute !important;
    left: 20px;
    right: 20px;
    top: 70px;
    bottom: 20px;
}


</style>
